<template>
    <div class="w" >
        <div class="in-one">
            视频标题：<input type="text" v-model="title" class="in1" placeholder="输入音频标题名称（建议写字数4-15）"><br>
            关联老师：<select v-model="teacher" class="in2">
                        <option value="">请选择关联老师</option>
                        <option value="0">老王</option>
                        <option value="1">梦龙</option>
                        <option value="2">晓慧</option>
                    </select><br>
            选择类型分类：<select v-model="cate" class="in2">
                        <option value="">选择一级分类</option>
                        <option value="0">线上</option>
                        <option value="1">线下</option>
                        <option value="2">其他</option>
                    </select><br>
            关联校区：<select v-model="school" class="in2">
                        <option value="">选择校区（非必填）</option>
                        <option value="0">黑马程序员</option>
                        <option value="1">传智教育</option>
                        <option value="2">博学谷</option>
                    </select><br>
            
        </div>
        <div class="in-two">
            选择收费方式； <input type="radio" v-model="moneyMode" value="0" @click="moneyCount=true">付费
            <div class="into" v-show="show">
                输入购买费用<input type="text" class="int1" v-model="moneyCount">
            </div>
            <input type="radio" v-model="moneyMode" value="1" @click="show=false">免费
        </div>
        视频简介：<input type="text" v-model="des" class="in1" placeholder="输入音频标题名称（建议写字数4-15）"><br>
        <div  class="text-01">
            视频详情：<textarea class="text-0101" v-model="videoDetail"></textarea>
        </div>
        <div class="show">
            <div class="show-one">开售时间:</div>
            <div class="show-two">
                <input type="radio" v-model="timeModel" value="0"  @click="showtime=false">立即开售<br>
                <input type="radio" v-model="timeModel" value="1"  @click="showtime=true">定时开售<br>
                <input type="radio" v-model="timeModel" value="2" @click="showtime=false">暂不开售<br>
            </div>
            <div class="show-three">
                <input type="text" class="show-three-input" v-show="showtime" v-model="timeCount">
            </div>
        </div>
        <div class="dibu">
            <button @click="submit">保存</button>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            show:true,
            showtime:false,
            title:'1',
            teacher:'2',
            cate:'1',
            school:'1',
            moneyMode:0,
            moneyCount:'',
            des:'1',
            videoDetail:'1',
            timeModel:'0',
            timeCount:'',
        }
    },
    methods:{
        fn(){
            this.show=!this.show
        },
        submit(){
            const params = {
                title: this.title, // 视频标题
                teacher: this.teacher, // 关联老师 0老王，1张梦龙  2武晓慧
                cate:this.cate, // 0 线下  1线上  2其他
                school: this.school, // 0 黑马程序员  1 传智教育  2博学谷
                moneyMode: this.moneyMode, // 0 付费模式  1 免费模式
                moneyCount: this.moneyCount, // 如果是付费模式，需要提交付费金额，如果是免费模式，不需要有这个字段
                des: this.des, // 视频简介
                videoDetail: this.videoDetail, // 视频详情
                timeModel: this.timeModel, // 0 立即开售  1 定时开售  3暂不开售
                timeCount: this.timeCount, // 如果是定时开售，提交开售时间，如果是其他模式不需要有这个字段
            }
            console.log(params);
        }
    }
}
</script>
<style lang="less">
.w{
    width: 1100px;
    margin: 0 auto;
    .in1,.in2 {
        margin-bottom: 15px;
        width: 800px;
        height: 30px;
    }
    .in-two{
        height: 100px;
        .into{
            display: inline-block;
            height: 77px;
            // width: 600px;
            background-color: #ccc;
            padding-left: 15px;
            .int1{
                margin-left: 15px;
                height: 70px;
                // border: solid 1px #ccc;
            }
        }
    }
    .text-01{
        text-align: left;
        height: 140px;
        .text-0101{
            width: 500px;
            height: 100px;
        }
    }
    .show{
        height: 100px;
        width: 500px;
        .show-one{
            float: left;
            width: 100px;
        }
        .show-two{
            float: left;
            width: 150px;
        }
        .show-three{
            float: left;
            list-style: 250px;
            width: 250px;
            .show-three-input{
                height: 30px;
                width: 180px;
                border: solid 1px #333;
            }
        }
    }
    .dibu{
        height: 200px;
        float: left;
    }
}
</style>